<template>
  <el-card style="width: 100%;margin-top: 10px;max-height: 80vh;overflow: auto;scrollbar-width: none;">
    <el-form size="default" :model="queryForm" ref="queryFormRef" label-width="90px">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="组织名称" prop="orgName">
            <el-input v-model="queryForm.orgName" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="主管单位" prop="competentDept">
            <el-select v-model="queryForm.competentDept" placeholder="请选择" clearable @change="getOrgList">
              <el-option v-for="item in authorityOptions" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
            </el-select>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="5">-->
        <!--          <el-form-item label="组织编码" prop="creditCode">-->
        <!--            <el-input v-model="queryForm.creditCode" placeholder="请输入" clearable />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="5">
          <el-form-item label="组织等级" prop="level">
            <el-select v-model="queryForm.level" placeholder="请选择" clearable>
              <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="5">-->
        <!--          <el-form-item label="表彰标题" prop="title">-->
        <!--            <el-input v-model="queryForm.title" placeholder="请输入" clearable />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <!--        <el-col :span="5">-->
        <!--          <el-form-item label="表彰年份" prop="examineYear">-->
        <!--            <el-date-picker v-model="queryForm.examineYear" style="width: 100%;" value-format="YYYY"-->
        <!--                            type="year" placeholder="请选择年份">-->
        <!--            </el-date-picker>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="4">
          <el-button type="primary" @click="getOrgList">查询</el-button>
          <el-button @click="clearForm">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!--    <el-row>-->
    <!--      <el-col :span="24">-->
    <!--        <el-button type="primary" @click="addLevel">新增</el-button>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <el-table :header-cell-style="{ background: '#F0F5FA', color: '#333333' }" :data="orgListLevel" border
      style="cursor: pointer;margin-top: 10px;">
      <el-table-column prop="id" label="序号" align="center" width="70">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orgName" label="社会组织名称" align="center" />
      <el-table-column prop="competentDept" label="主管单位" align="center"/>
      <el-table-column prop="level" label="社会组织等级" align="center" width="160">
        <template #default="scope">
          <span>{{ getLevel(scope.row.level) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="评估日期" align="center" width="140"/>
      <el-table-column prop="validityTime" label="有效期" align="center" width="140"/>
        <el-table-column prop="creditCode" label="社会组织编码" align="center" />
      <el-table-column fixed="right" label="操作" width="140" align="center">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px;width: 100%;text-align: right;display: flex;justify-content: flex-end;">
      <el-pagination small v-model:current-page="queryForm.pageNum" :page-sizes="[10]" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="getOrgList" />
    </div>
  </el-card>
  <el-dialog v-model="dialogVisible" title="社会组织等级" width="550px" append-to-body :close-on-click-modal="false">
    <el-form label-position="left" size="default" :model="orgForm" ref="orgFormRef" :rules="orgRules" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="社会组织名称" prop="orgName">
            <el-input v-model="orgForm.orgName" placeholder="请输入社会组织名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="社会组织编码" prop="creditCode">
            <el-input v-model="orgForm.creditCode" placeholder="请输入社会组织编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="社会组织等级" prop="level">
            <el-select :popper-append-to-body="false" clearable style="width:100%;" v-model="orgForm.level"
              placeholder="请选择社会组织等级">
              <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="评估日期" prop="createTime">
            <!--            <el-input v-model="orgForm.validityTime" placeholder="请选择有效期"></el-input>-->
            <el-date-picker v-model="orgForm.createTime" style="width: 100%;" value-format="YYYY-MM-DD"
                            type="date"
                            placeholder="请选择评估日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="有效期至" prop="validityTime">
<!--            <el-input v-model="orgForm.validityTime" placeholder="请选择有效期"></el-input>-->
            <el-date-picker v-model="orgForm.validityTime" style="width: 100%;" value-format="YYYY-MM-DD"
                            type="date"
                            placeholder="请选择有效期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <div slot="footer" style="text-align: right;width: 100%;">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="config()">确 定</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { computed, onMounted, ref, onUnmounted, reactive, handleError } from 'vue'
import { editOrgLevel, addOrgLevel, getOrgLevelList, deleteActivity, delOrgLevel } from '@/views/yearCheck/ykb/otherApi'
import { getAuthorityDept, getDictByCode } from '@/views/yearCheck/ykb/mf/mf'
import { ElMessage, ElMessageBox } from 'element-plus'
const orgFormRef = ref(null);
const dialogVisible = ref(false);
let orgListLevel = ref([]);
let awardTypeOptions = ref([{ id: "1", name: '表彰' }, { id: "2", name: '宣传报道' }]);
let levelOptions = ref([]);
let total = ref(0);
let queryForm = ref({
  pageNum: '1',
  pageSize: '10',
  examineYear: '',
  creditCode: '',
  competentDept:'',
  level: '',
  orgName: ''
});

let orgForm = ref({
  orgName: '',
  creditCode: '',
  level: '',
  id: '',
  createTime:'',
  validityTime:''
})
let orgRules = ref({
  orgName: [{ required: true, message: '请输入', trigger: 'blur' }],
  creditCode: [{ required: true, message: '请输入', trigger: 'blur' }],
  level: [{ required: true, message: '请选择', trigger: 'blur' }],
  createTime: [{ required: true, message: '请选择', trigger: 'blur' }],
    validityTime: [{ required: true, message: '请选择', trigger: 'blur' }]
});

function handleEdit(row) {
  orgForm.value = { ...row }
  dialogVisible.value = true;
}

function handleDelete(id) {
  ElMessageBox.confirm(
    '是否删除此记录?',
    '提示', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  }
  )
    .then(() => {
      delOrgLevel(id).then(response => {
        ElMessage.success('删除成功！')
        getOrgList();
      });
    })
    .catch(() => {

    })
}
function addLevel() {
  orgForm.value = {
    orgName: '',
    creditCode: '',
    level: ''
  }
  dialogVisible.value = true;
}

function config() {
  console.log(orgForm.value)
  orgFormRef.value.validate((valid) => {
    if (valid) {
      if (orgForm.value.id) {
        editOrgLevel(orgForm.value).then(response => {
          console.log(response.data)
          if (response.code == 200) {
            ElMessage.success('操作成功！')
            dialogVisible.value = false;
          }
          getOrgList();
        })
      } else {
        addOrgLevel(orgForm.value).then(response => {
          console.log(response.data)
          if (response.code == 200) {
            ElMessage.success('操作成功！')
            dialogVisible.value = false;
          }
          getOrgList();
        })
      }
    }
  })
}
function clearForm() {
  queryForm.value = {
    pageNum: '1',
    pageSize: '10',
    examineYear: '',
    creditCode: '',
    competentDept:'',
    level: '',
    orgName: ''
  }
  getOrgList();
}
const getOrgList = () => {
  getOrgLevelList(queryForm.value).then(response => {
    console.log(response)
    orgListLevel.value = response.rows
    total.value = response.total
  })
}
const authorityOptions = ref([]);
const getDict = () => {
  getDictByCode('level').then(response1 => {
    levelOptions.value = response1.data
    getOrgList();
  })
  getAuthorityDept().then(response => {
    authorityOptions.value = response.data;
    // authorityOptions.value.push({"deptId":"GO_1560457202370744320","id":"65883","deptName": "云阳县工商联","parentId": "GO_1657988536883802112"});
  })
}
function getLevel(str) {
  for (let i = 0; i < levelOptions.value.length; i++) {
    if (levelOptions.value[i].id == str) {
      return levelOptions.value[i].name
    }
  }
  return str
}
getDict();
</script>
<style lang="scss" scoped></style>
